/**
 * Created by heshufen on 20/6/21.
 */
import React from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import TextButton from '../../components/TextButton';
import PhoneInput from '../../components/PhoneInput';
import CaptchaInput from '../../components/CaptchaInput';
import CommonDialog from '../../components/dialog/CommonDialog';
import ToastView from '../../components/ToastView';
import Screen from '../base/Screen';
import BackNavBar from '../../components/navbar/BackNavBar';

export default class LoginScreen extends Screen {

    getInitState(props) {
        return {
            showYuyingDialog: false,
            showToastView: false,
            disable:false
        }
    }

    getPhoneNum = () => {
        return this.refs['phone'].getValue();
    };

    getCaptcha = async () => {
        /*try {
            const phone = this.getPhoneNum();
            const res = await getUpdatePWCaptchaAPI({phone, countryCode});
            if (res.isOk) {
                toast('发送成功，请注意查收！');
                return true;
            }else {
                toast(res.data.msg);
            }
        } catch (e) {
            toast(e.message);
        }*/
    };

    login = async () => {
        this.props.navigation.navigate("ChooseGender")
        // this.setState({showToastView: true});
        /*const phone = this.refs['phone'].getValue();
        const captcha = this.refs['captcha'].getValue();
        alert('phone:' + phone + ';captcha:' + captcha);*/
    };

    renderHeader(navigation) {
        return(
            <BackNavBar navigation={navigation}/>
        )
    }

    renderBody(navigation) {
        const {disable} = this.state;
        return (
            <View>
                <View style={styles.containerWithoutBack}>
                    <Text style={styles.title}>手机号登录</Text>
                    <Text style={styles.desc}>国家网络安全规定，请登录手机号</Text>
                    <PhoneInput style={{marginBottom: 11}} ref="phone"/>
                    <CaptchaInput ref="captcha"
                                  getPhoneNum={this.getPhoneNum}
                                  getCaptcha={this.getCaptcha}/>
                    <TextButton style={[styles.buttonStyle,disable ? {backgroundColor: '#a1a1a1',opacity: 0.4,} : {backgroundColor:'#ff375c'}]} disable={disable}  textStyle={styles.textStyle} text='登录'
                                onPress={this.login}/>
                </View>
                <Text style={styles.canNotReceive} onPress={() => {
                    this.setState({showYuyingDialog: true});
                }}>收不到验证码？</Text>
                {this._renderToastView()}
            </View>
        );
    }

    renderFooter() {
        return (
            <Text style={styles.loginAgree}>登录即代表同意<Text style={styles.agreeText1}>用户协议</Text>和<Text
                style={styles.agreeText1}>隐私政策</Text></Text>
        );
    }

    renderFloatViews(): Array {
        let views = super.renderFloatViews();
        views.push(this._renderDialog());
        views.push(this._renderToastView());
        return views;
    }

    _onYuyinCaptcha = async () => {
        this.setState({showYuyingDialog: false});
        /*try {
            const phone = this.refs['phone'].getValue();
            const countryCode = this.refs['phone'].getCountryCode();
            const res = await getUpdatePWCaptchaAPI({phone, countryCode, yuyin: true});
            if (res.isOk) {
                toast('发送成功，请注意查收！');
                return true;
            } else
                toast(res.data.msg);
        } catch (e) {
            toast(e.message);
        }*/
    };

    _renderDialog() {
        return <CommonDialog key={1}
                             title="语音验证码"
                             content="验证码将以电话形式通知你，请注意接听"
                             contentView={this.getDialogContentView()}
                             visible={this.state.showYuyingDialog}
                             onCancel={() => this.setState({showYuyingDialog: false})}
                             onConfirm={this._onYuyinCaptcha}/>;
    }

    getDialogContentView() {
        let desc = '验证码将以电话形式通知你\n请注意接听';
        return (
            <View style={dialogStyles.container}>
                <Text style={dialogStyles.title}>语音验证码</Text>
                <Text style={dialogStyles.desc}>{desc}</Text>
            </View>
        );
    }

    _renderToastView() {
        if (this.state.showToastView) {
            return (
                <ToastView key={2}
                           message={'验证码不匹配 请重新输入'}
                           time={1000}
                           onDismiss={() => {
                               this.setState({showToastView: false});
                           }}/>
            );
        }
    }
}

const dialogStyles = StyleSheet.create({
    container: {
        marginTop: 20,
        alignItems: 'center',
    },
    title: {
        marginBottom: 7,
        fontWeight: 'bold',
        fontSize: 16,
        color: '#191919',
    },
    desc: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 14,
        lineHeight: 23,
        color: '#191919',
        textAlign: 'center',
        marginBottom: 19,
    },
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    backImageContainer: {
        marginTop: 18,
        marginLeft: 15,
        width: 10,
        height: 18,
    },
    backImage: {
        width: 10,
        height: 18,
    },
    containerWithoutBack: {
        marginTop: 34,
        alignItems: 'center',
    },
    title: {
        marginBottom: 5,
        fontFamily: 'PingFangSC-Semibold',
        fontSize: 26,
        color: '#454545',
    },
    desc: {
        marginBottom: 18,
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 12,
        color: '#414141',
    },
    buttonStyle: {
        marginTop: 37,
        marginBottom: 25,
        width: 277,
        height: 46,
        borderRadius: 24,
    },
    textStyle: {
        fontFamily: 'PingFangSC-Medium',
        fontSize: 16,
        color: '#ffffff',
    },
    canNotReceive: {
        paddingRight: 40,
        textAlign: 'right',
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 13,
        color: '#1a1a1a',
    },
    loginAgree: {
        marginBottom: 25,
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 12,
        color: '#000',
        textAlign: 'center',
    },
    agreeText1: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 13,
        color: '#628cff',
    },
});
